<!doctype html>
<html class="no-js">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>register</title>

		<!-- Set render engine for 360 browser -->
		<meta name="renderer" content="webkit">

		<!-- No Baidu Siteapp-->
		<meta http-equiv="Cache-Control" content="no-siteapp" />

		<!--<link rel="icon" type="image/png" href="assets/i/favicon.png">-->

		<!-- Add to homescreen for Chrome on Android -->
		<meta name="mobile-web-app-capable" content="yes">
		<!--<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">-->

		<!-- Add to homescreen for Safari on iOS -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<!--<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">-->

		<!-- Tile icon for Win8 (144x144 + tile color) -->
		<!--<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">-->
		<meta name="msapplication-TileColor" content="#0e90d2">

		<link rel="stylesheet" href="amazeui/css/amazeui.min.css">
		<link rel="stylesheet" href="amazeui/css/app.css">
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" href="css/content.css" />
	</head>

	<body>
		<header class="am-topbar">
			<div class="am-container">
				<h1 class="am-topbar-brand am-text-ir">
    				<a href="#">创意热店</a>
 				</h1>

				<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

				<div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">

					<form class="am-topbar-form am-topbar-left am-form-inline" role="search">
						<div class="am-form-group">
							<input type="text" class="am-form-field am-input-sm" placeholder="搜索">
							<button class="am-btn am-btn-default" type="button"><span class="am-icon-search"></span> </button>
						</div>

					</form>

					<!--<div class="am-topbar-right">
						<button class="am-btn am-btn-primary am-topbar-btn am-btn-sm">登录</button>
						<button class="am-btn am-btn-primary am-topbar-btn am-btn-sm">注册</button>
					</div>-->
					<div class="am-topbar-right">

						<ul class="am-nav am-nav-pills am-topbar-nav">
							<li>
								<a href="#">首页</a>
							</li>
							<li class="am-dropdown" data-am-dropdown>
								<a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
									创意
								</a>
								<ul class="am-dropdown-content">
									<li>
										<a href="#">创意详情</a>
									</li>
									<li>
										<a href="#">创意人</a>
									</li>
									<li>
										<a href="#">创意群</a>
									</li>
								</ul>
							</li>
							<li class="am-dropdown" data-am-dropdown>
								<a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
									需求
								</a>
								<ul class="am-dropdown-content">
									<li>
										<a href="#">需求详情</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">使用帮助</a>
							</li>
							<li>
								<a href="#">登录</a>
							</li>
							<li>
								<a href="#">注册</a>
							</li>
						</ul>
					</div>
				</div>
			</div>

		</header>

		<div class="am-container register">
			<div class="am-g">
				<div class="am-u-md-12 am-text-center">
					<h2>注册创意热店账号</h2>
				</div>
				<div class="am-g">

					<div class="am-u-md-8 am-u-md-offset-2">
						<form action="" class="am-form" id="doc-vld-msg">
							<fieldset>
									<div class="am-input-group">
										<span class="am-input-group-label"><i class="am-icon-envelope am-icon-fw"></i></span>
										<input type="email" class="am-form-field" required placeholder="邮箱" data-validation-message="请输入正确的邮箱">
									</div>
									<div class="am-input-group">
										<span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
										<input type="text" class="am-form-field" placeholder="输入用户名（至少三个字符）" required minlength="3" data-validation-message="至少填写3个字符">
									</div>
									<div class="am-input-group">
										<span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
										<input id="password" pattern="^[a-zA-Z]\w{5,17}$" type="password" class="am-form-field" placeholder="密码（ 字母开头，长度在6~18之间，只能包含字母、数字和下划线）" data-validation-message="请输入正确的密码格式">
									</div>
									<div class="am-input-group">
										<span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
										<input type="password" data-equal-to="#password" class="am-form-field" placeholder="确认密码" data-validation-message="请输入与上面一致的密码">
									</div>
								</div>

								<div class="am-g">
									<div class="am-u-md-3 am-u-md-offset-3">

										<div class="am-checkbox">
											<label>
        								<input type="checkbox"> 同意协议
     								</label>
										</div>
									</div>
									<div class="am-u-md-2 am-u-end am-u-md-offset-1">
										<div class="">
											<a href="">查看协议</a>
										</div>
									</div>
								</div>
								<button type="submit" class="am-btn am-btn-default am-btn-block" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 225}">注册</button>

							</fieldset>
						</form>

					</div>
				</div>
			</div>
		</div>
		
		<div class="am-modal am-modal-no-btn register_modal" tabindex="-1" id="doc-modal-1">
			<div class="am-modal-dialog">
				<div class="am-modal-hd">
					<h1 class="am-text-center">恭喜你，注册成功！</h1>
					<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
				</div>
				<div class="am-modal-bd">
					<div class="am-g">
						<div class="am-u-md-6">
							<button type="button" class="am-btn am-btn-primary am-btn-block am-radius">发布需求</button>
						</div>
						<div class="am-u-md-6">
							<button type="button" class="am-btn am-btn-default am-btn-block am-radius">提供服务</button>
						</div>
					</div>
					<a href="">返回首页</a>
				</div>
			</div>
		</div>
		<footer data-am-widget="footer" class="footer" data-am-footer="{  }">
			<div class="am-container">
				<div class="am-g">
					<div class="am-u-md-12 am-u-md-offset-1">
						<ul class="am-avg-sm-3">
							<li>
								<h3>关于我们</h3>
								<ul>
									<li>
										<a href="">公司简介</a>
									</li>
									<li>
										<a href="">公司简介</a>
									</li>
									<li>
										<a href="">公司简介</a>
									</li>
								</ul>
							</li>
							<li>
								<h3>联系我们</h3>
								<ul>
									<li>Tel：12345678910</li>
									<li>E-mail：xxxxxx@xxx.com</li>
									<li>公司地址：xxxxxxxxxxx</li>
								</ul>

							</li>
							<li>
								<h3>更新日志</h3>
								<ul>
									<li>xx.xx更新x.xx版本</li>
									<li>xx.xx更新x.xx版本</li>
									<li>xx.xx更新x.xx版本</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>

				<div class="footer-line">
					<ul class="am-cf am-text-center">
						<li class="">
							<a href="##" class="am-icon-qq"></a>
						</li>
						<li class="">
							<a href="##" class="am-icon-tencent-weibo"></a>
						</li>
						<li class="">
							<a href="##" class="am-icon-weibo"></a>
						</li>
						<li class="">
							<a href="##" class="am-icon-weixin"></a>
						</li>
					</ul>
				</div>
				<hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
				<div class="am-text-center">
					<p>CopyRight©2014 AllMobilize Inc.</p>
					<p>京ICP备13033158</p>
				</div>

			</div>
		</footer>
		<script src="amazeui/js/jquery.min.js"></script>
		<script src="amazeui/js/amazeui.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#doc-vld-msg').validator({
					onValid: function(validity) {
						$(validity.field).closest('.am-form-group').find('.am-alert').hide();
					},

					onInValid: function(validity) {
						var $field = $(validity.field);
						var $group = $field.closest('.am-form-group');
						var $alert = $group.find('.am-alert');
						// 使用自定义的提示信息 或 插件内置的提示信息
						var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

						if(!$alert.length) {
							$alert = $('<div class="am-alert am-alert-danger"></div>').hide().
							appendTo($group);
						}

						$alert.html(msg).show();
					}
				});
			});
		</script>
	</body>

</html>